<template>
    <!-- TreeSelect做侧边栏 -->
    <van-tree-select height="auto" :items="items" :main-active-index.sync="active">
        <template #content>
            <!-- 切换展示图片 -->
            <van-image v-if="active === 0" src="https://pic2.zhimg.com/80/v2-a760f42e9a5e88cdd8663cd13b48b439_720w.webp" />
            <van-image v-if="active === 1" src="https://pic3.zhimg.com/80/v2-2814f57b70da33efd5405a60f6ccb5fe_720w.webp" />
            <van-image v-if="active === 2" src="https://pic3.zhimg.com/80/v2-350766564a3abb0364f0bc5b1b750606_720w.webp" />
            <van-image v-if="active === 3" src="https://pic3.zhimg.com/80/v2-b16d669dbc6c97f49bd065e331cfce4e_720w.webp" />
            <van-image v-if="active === 4" src="https://pic4.zhimg.com/80/v2-230330f3468146e6577c82abc1772f1b_720w.webp" />
            <van-image v-if="active === 5" src="https://pic1.zhimg.com/80/v2-1b699bbb5ea75ad0d8cbf5d11b835fa8_720w.webp" />
            <van-image v-if="active === 6" src="https://pic4.zhimg.com/80/v2-ea7c8d1e6f4b25ded41f4445726ea17b_720w.webp" />
            <van-image v-if="active === 7" src="https://pic2.zhimg.com/80/v2-b261b96f4dfb139fbcfb8743cc2ceb41_720w.webp" />
            <van-image v-if="active === 8" src="https://pic4.zhimg.com/80/v2-d774da818e905355811d17f2605bcfb3_720w.webp" />
            <van-image v-if="active === 9" src="https://pic1.zhimg.com/80/v2-87bf6cbded29cd17282bfcca0caf86c0_720w.webp" />
            <van-image v-if="active === 10" src="https://pic4.zhimg.com/80/v2-8252934a7f8e11a363467892451f6caf_720w.webp" />
            <van-image v-if="active === 11" src="https://pic3.zhimg.com/80/v2-cf44715824cdfabaa0a33f2d1176fb96_720w.webp" />
            <!-- 切换介绍文字 -->
            <p v-if="active === 0">{{ ylcd }}</p>
            <p v-if="active === 1">{{ lycd }}</p>
            <p v-if="active === 2">{{ yccd }}</p>
            <p v-if="active === 3">{{ yycd }}</p>
            <p v-if="active === 4">{{ ycdd }}</p>
            <p v-if="active === 5">{{ ytcd }}</p>
            <p v-if="active === 6">{{ ymcd }}</p>
            <p v-if="active === 7">{{ nwcd }}</p>
            <p v-if="active === 8">{{ hmcd }}</p>
            <p v-if="active === 9">{{ zcd }}</p>
            <p v-if="active === 10">{{ kzcd }}</p>
            <p v-if="active === 11">{{ jfcd }}</p>
        </template>
    </van-tree-select>
</template>
  
<script>
import { mapState } from 'vuex';
export default {
    // 标签
    data() {
        return {
            active: 0,
            items: [{ text: '雁翎长刀' }, { text: '柳叶长刀' }, { text: '雁翅长刀' }, { text: '偃月长刀' }, { text: '雁翅大刀' }
            , { text: '鱼头长刀' }, { text: '雁毛长刀' }, { text: '牛尾长刀' }, { text: '禾苗长刀' }, { text: '直长刀' }
            , { text: '宽直长刀' }, { text: '剑锋长刀' }],
        };
    },
    // 用vuex导入介绍文字
    computed: {
        ...mapState(['ylcd', 'lycd', 'yccd', 'yycd', 'ycdd', 'ytcd', 'ymcd', 'nwcd', 'hmcd', 'zcd', 'kzcd', 'jfcd'])
    }
};
</script>